<template>
  <div>
    <div class="title">
      政府购买服务项目资金统计表
    </div>
    <!--  -->
    <a-tabs default-active-key="0" @change="change">
      <a-tab-pane key="0" tab="政府购买服务项目资金统计(一)"> </a-tab-pane>
      <a-tab-pane key="1" tab="政府购买服务项目资金统计(二)"> </a-tab-pane>
    </a-tabs>
    <!--  -->
    <div class="bodyList">
      <div class="bodyHeader">
        {{ bodyName }}
      </div>
      <div class="bodyContent">
        <div v-for="(item, index) in bodyList" :key="index">
          <div class="bodyClass">
            {{ index + 1 }}.{{ item.specificClassName }}:
          </div>
          <div
            class="bodyTitle"
            :key="index1"
            v-for="(item1, index1) in bodyMapper"
          >
            <div v-if="item1.children">
              <div style="font-size: 15px;font-weight:400;">
                1.{{ index1 + 1 }} {{ item1.name }}:
              </div>
              <div
                :key="index2"
                v-for="(item2, index2) in item1.children"
                class="listWrap"
                style="border:none;padding:1px 0px;"
              >
                <div v-if="item2.children">
                  <div style="margin: 5px 0px;">
                    1.{{ index1 + 1 }}.{{ index2 + 1 }} {{ item2.name }}:
                  </div>
                  <div :key="index3" v-for="(item3, index3) in item2.children">
                    <div class="listWrap" style="padding:5px 0px;">
                      <div
                        class="leftClass"
                        style="font-size: 15px;margin-left: 18px;"
                      >
                        {{ item3.name }}
                      </div>
                      <div class="middleClass"></div>
                      <div class="rightClass">
                        {{ item[item3.filed] }}
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else>
                  <div class="listWrap" style="padding:5px 0px;">
                    <div class="leftClass" style="font-size: 15px;">
                      {{ item2.name }}
                    </div>
                    <div class="middleClass"></div>
                    <div class="rightClass">
                      {{ item[item2.filed] }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <div class="listWrap" style="padding:5px 0px;">
                <div class="leftClass" style="font-size: 15px;">
                  {{ item1.name }}
                </div>
                <div class="middleClass"></div>
                <div class="rightClass">
                  {{ item[item1.filed] }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/*eslint-disable*/
import { getCommonData } from "@/api/table/index.js";
import loadingType from '@/views/DetailPage/mixinsloadingtype'

export default {
  data() {
    return {
      bodyName: "服务领域",
      list: [
        {
          name: "政府购买服务项目资金统计(一)",
        },
        {
          name: "政府购买服务项目资金统计(二)",
        },
      ],
      current: 0,
      bodyList: [],
      formType: 0,
      bodyMapper: [
        {
          name: "政府性基金",
          children: [
            {
              name: "2019年",
              children: [
                {
                  name: "决算项目数",
                  filed: "govCount",
                },
                {
                  name: "决算金额数",
                  filed: "govMoney",
                },
              ],
            },
            {
              name: "2020年",
              children: [
                {
                  name: "预算项目数",
                  filed: "govAfterCount",
                },
                {
                  name: "预算金额数",
                  filed: "govAfterMoney",
                },
                {
                  name: "上半年执行数",
                  filed: "govAfterExecute",
                },
              ],
            },
          ],
        },
        {
          name: "一般公共预算",
          children: [
            {
              name: "2019年",
              children: [
                {
                  name: "决算项目数",
                  filed: "normalCount",
                },
                {
                  name: "决算金额数",
                  filed: "normalMoney",
                },
              ],
            },
            {
              name: "2020年",
              children: [
                {
                  name: "预算项目数",
                  filed: "normalAfterCount",
                },
                {
                  name: "预算金额数",
                  filed: "normalAfterMoney",
                },
                {
                  name: "上半年执行数",
                  filed: "normalAfterExecute",
                },
              ],
            },
          ],
        },
        {
          name: "其他",
          children: [
            {
              name: "2019年",
              children: [
                {
                  name: "决算项目数",
                  filed: "otherCount",
                },
                {
                  name: "决算金额数",
                  filed: "otherMoney",
                },
              ],
            },
            {
              name: "2020年",
              children: [
                {
                  name: "预算项目数",
                  filed: "otherAfterCount",
                },
                {
                  name: "预算金额数",
                  filed: "otherAfterMoney",
                },
                {
                  name: "上半年执行数",
                  filed: "otherAfterExecute",
                },
              ],
            },
          ],
        },
        {
          name: "合计",
          children: [
            {
              name: "2019年",
              children: [
                {
                  name: "决算项目数",
                  filed: "totalCount",
                },
                {
                  name: "决算金额数",
                  filed: "totalMoney",
                },
              ],
            },
            {
              name: "2020年",
              children: [
                {
                  name: "预算项目数",
                  filed: "totalAfterCount",
                },
                {
                  name: "预算金额数",
                  filed: "totalAfterMoney",
                },
                {
                  name: "上半年执行数",
                  filed: "totalAfterExecute",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  created() {
    this.getCommonData();
  },
  mixins:[loadingType],
  methods: {
    change(index) {
      if (index === 0) {
        this.bodyName = "服务领域";
      } else {
        this.bodyName = "具体类别";
      }
      this.current = index;
      this.formType = index;
      this.getCommonData();
    },
    // 获取政府购买服务项目资金统计
    getCommonData() {
      // this.$emit("loadingType", true);
      getCommonData("/govBuyFund/findByFormGuid", {
        formGuid: this.$route.query.formGuid,
        formType: this.formType,
        isSum: 1,
      }).then((res) => {
        // this.$emit("loadingType", false);
        this.dataLoadingType = false
        this.headLoadingType = false
        if (res.success) {
          this.bodyList = res.data;
        } else {
          this.bodyList = [];
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  font-size: 17px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 26px;
  padding: 10px;
}

.bodyHeader {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  line-height: 40px;
  border-bottom: 1px solid #e0d9d9;
}

.bodyContent {
  font-size: 16px;
  color: #999999;
  line-height: 40px;
}

.bodyTitle {
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #292828;
  line-height: 24px;
  margin-top: 15px;
}

.bodyClass {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: bolder;
  color: #656363;
  border-bottom: 1px solid #e0d9d9;
  padding: 5px 0px;
  align-items: center;
}

.bodyList {
  margin-top: 5px;
  padding: 5px 10px;
  background: #fff;
  margin: 8px 0px;
  font-family: PingFangSC-Medium, PingFang SC;
}

.container {
  margin-top: 5px;
  padding: 5px 10px;
  background: #fff;
  margin: 8px 0px;
}

.specialStyle {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  padding: 10px 0px;
  align-items: center;
}

.specialContent {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  padding-right: 5px;
  line-height: 25px;
  word-wrap: break-word;
  word-break: break-all;
  margin-top: 10px;
  padding: 0px 10px;
}

.listWrap {
  display: flex;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  border-bottom: 1px solid #e0d9d9;
  padding: 10px 0px;
  align-items: center;
  width: calc(97vw);
}

.leftClass {
  flex: 1.1;
  text-align: left;
}

.middleClass {
  flex: 0.5;
}

.rightClass {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  flex: 2;
  text-align: right;
  padding-right: 5px;
  line-height: 25px;
  word-wrap: break-word;
  word-break: break-all;
}
</style>
